<template>
    <view>
        <view class="question-header u-clearfix">
            <view class="type">{{ question.question_type_text }}</view>
            <view class="score" v-if="score">（{{ score }}分）</view>
            <view class="content">
                <rich-text :nodes="question.title"></rich-text>
            </view>
        </view>

        <view class="question-file" v-if="!$u.test.empty(question.material)">
            <view class="file-item" v-for="(item, index) in question.material" :key="index">
                <exam-video
                    v-if="item.type === 'video'"
                    :src="item.src"
                    :title="`视频文件${index + 1}`"
                    :index="`video_${question.id}_${index}`"
                    :topicIndex="topicIndex"
                ></exam-video>
                <exam-audio
                    v-if="item.type === 'audio'"
                    :src="item.src"
                    :title="`音频文件${index + 1}`"
                    :index="`audio_${question.id}_${index}`"
                    :topicIndex="topicIndex"
                ></exam-audio>
            </view>
        </view>

        <!-- 单选/判断 -->
        <view
            class="question-body question-choose"
            v-if="$edu.test.inArray(question.question_type, [1, 2])"
        >
            <exam-radio-group
                v-model="current_field"
                :active-color="globPrimaryColor"
                :disabled-color="globThemeColorDisabled"
                :disabled="disabled"
                placement="column"
                @change="change"
            >
                <exam-radio
                    :name="item.id"
                    v-for="item in question.options"
                    :key="item.id"
                    :custom-style="{ paddingBottom: '48rpx' }"
                >
                    <view class="choose-item__option u-clearfix">
                        <view class="lebal">{{ item.key }}.</view>
                        <view class="content">
                            <rich-text :nodes="item.value"></rich-text>
                        </view>
                    </view>
                </exam-radio>
            </exam-radio-group>
        </view>

        <!-- 多选 -->
        <view
            class="question-body question-choose"
            v-if="$edu.test.inArray(question.question_type, [3, 4])"
        >
            <exam-checkbox-group
                v-model="current_field"
                :active-color="globPrimaryColor"
                :disabled-color="globThemeColorDisabled"
                :disabled="disabled"
                placement="column"
                @change="change"
            >
                <exam-checkbox
                    :name="item.id"
                    v-for="item in question.options"
                    :key="item.id"
                    :custom-style="{ paddingBottom: '48rpx' }"
                >
                    <view class="choose-item__option u-clearfix">
                        <view class="lebal">{{ item.key }}.</view>
                        <view class="content">
                            <rich-text :nodes="item.value"></rich-text>
                        </view>
                    </view>
                </exam-checkbox>
            </exam-checkbox-group>
        </view>

        <!-- 填空题 -->
        <view class="question-body question-filling" v-if="question.question_type == 5">
            <view
                class="filling-item u-flex"
                v-for="(item, index) in question.options"
                :key="index"
            >
                <view class="label">({{ item.number }})</view>
                <view class="input">
                    <u-input
                        v-model="current_field[index]"
                        :disabled="disabled"
                        border
                        @input="change"
                    />
                </view>
            </view>
        </view>

        <!-- 材料题 -->
        <view class="question-body question-material" v-if="question.question_type == 6">
            <practice-question
                v-for="item in question.topics"
                :key="item.id"
                :question="item"
                :disabled="disabled"
            ></practice-question>
        </view>

        <!-- 完形填空 -->
        <view class="question-body question-protype" v-if="question.question_type == 7">
            <view class="u-flex u-col-top" v-for="(item, index) in question.topics" :key="index">
                <view class="protype-index">{{ index + 1 }}.</view>
                <exam-radio-group
                    v-model="current_field[index]"
                    :active-color="globPrimaryColor"
                    :disabled-color="globThemeColorDisabled"
                    :disabled="disabled"
                    @change="change"
                    ref="examRadioGroup"
                >
                    <view class="u-flex u-flex-wrap">
                        <exam-radio
                            :name="option.id"
                            v-for="option in item.options"
                            :key="option.id"
                            :custom-style="{
                                marginRight: '30rpx',
                                marginBottom: '30rpx',
                            }"
                        >
                            <view class="protype-item__option u-clearfix">
                                <view class="lebal">{{ option.key }}.</view>
                                <view class="content u-line-1">
                                    <rich-text :nodes="option.value"></rich-text>
                                </view>
                            </view>
                        </exam-radio>
                    </view>
                </exam-radio-group>
            </view>
        </view>

        <!-- 解答题 -->
        <view class="question-body question-answer" v-if="question.question_type == 8">
            <u-input
                v-model="current_field"
                type="textarea"
                border
                :height="240"
                :maxlength="300"
                :disabled="disabled"
                @input="change"
            />
        </view>
    </view>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
import examRadioGroup from './exam-radio-group.vue'
import examRadio from './exam-radio.vue'
import examCheckboxGroup from './exam-checkbox-group.vue'
import examCheckbox from './exam-checkbox.vue'
import examVideo from './exam-video.vue'
import examAudio from './exam-audio.vue'
export default {
    name: 'practice-question',
    components: {
        examRadioGroup,
        examRadio,
        examCheckboxGroup,
        examCheckbox,
        examVideo,
        examAudio,
    },
    props: {
        // 试题数据
        question: {
            type: Object,
            default: () => {
                return {}
            },
        },
        // 绑定的值
        value: {
            type: [Array, Number, String],
        },
        // 分数
        score: {
            type: [Number, String],
            default: 0,
        },
        // 禁用
        disabled: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            current_field: this.value,
        }
    },
    watch: {
        value() {
            if (this.value) {
                this.current_field = this.value
            }
        },
    },
    computed: {
        ...mapState({
            topicIndex: (state) => state.examPractice.topicIndex,
            topicList: (state) => state.examPractice.topicList,
        }),
        ...mapGetters({
            globPrimaryColor: 'designSetting/getGlobThemeColor',
            globThemeColorDisabled: 'designSetting/getGlobThemeColorDisabled',
        }),
    },
    options: { styleIsolation: 'shared' },
    methods: {
        change(e) {
            if (this.question.question_type == 7) {
                const values = []
                this.$refs.examRadioGroup.map((child, index) => {
                    child.children.map((item) => {
                        if (item.checked) {
                            values[index] = item.name
                        }
                    })
                })
                // 发出事件
                this.$emit('change', values)
            } else {
                // 发出事件
                this.$emit('change', e)
            }
        },
    },
}
</script>
<style lang="scss" scoped>
.question-header {
    line-height: 46rpx;
    margin-bottom: 30rpx;
    .type {
        float: left;
        font-size: 24rpx;
        font-weight: 400;
        color: #ffffff;
        height: 32rpx;
        line-height: 32rpx;
        padding: 0 10rpx;
        margin-top: 7rpx;
        margin-right: 20rpx;
        @include bg-color;
    }
    .score {
        float: left;
        font-size: 28rpx;
        color: #303133;
    }
    .content {
        font-size: 28rpx;
        font-weight: 400;
        color: #303133;
    }
}
// 文件
.question-file {
    .file-item {
        margin-bottom: 24rpx;
    }
}
// 选择题
.question-choose {
    .choose-item__option {
        .lebal {
            float: left;
        }
    }
}
// 填空题
.question-filling {
    .filling-item {
        margin-bottom: 40rpx;
        .label {
            font-size: 30rpx;
            color: #303133;
            margin-right: 16rpx;
        }
        .input {
            flex: 1;
        }
    }
}
// 完型填空
.question-protype {
    .protype-index {
        font-size: 30rpx;
        color: #303133;
        margin-right: 16rpx;
    }
    .protype-item__option {
        .lebal {
            float: left;
        }
    }
}
</style>
